<template>
    <div class="members_top">
        <el-card class="members-card" shadow="always" :style="{width:'1200px'}" :body-style="{ padding: '20px' }">
            <div class="members-card-titel">会员专区 </div>
            <div class="members-card-content">
                <div class="members-card-content-img"></div>
                <div class="members-card-content-mid">
                    <div class="right-item">
                        <div class="user">
                            <span>name</span>
                            <span class="level_boxmedium">
                                Lv.1
                            </span>
                        </div>
                        <div class="bootm">开通会员尊享10大权限</div>
                    </div>
                    <div class="right-item2">
                        <span class="icon"></span>
                        <p>以下713个会员专区课程全部免费学习</p>
                    </div>
                    <div class="right-item3">
                        <span class="icon"></span>
                        <p>购买非会员专区课程可获会员立减优惠</p>
                    </div>
                </div>
                <div class="members-card-content-Open">
                    <div class="members-card-content-Open-button">
                        <el-button type="danger" color="#f93684" :bg="true" round>立即开通</el-button>
                    </div>
                    <a href="###">查看/开通></a>
                </div>
            </div>
        </el-card>
        <!-- 
            兴趣技能
         -->
        <el-card class="Search-card" shadow="always" :body-style="{ padding: '20px' }">
            <ul>
                <li v-for="(item,index) in Searchcriteriatitle" v-show="sstj?index<2:true" :key="index">
                    <span class="spantitle">{{item.label}}:</span> <span class="spantitleitem "
                        v-for="(item1,index) in item.choises" @click="clickactive(item1,item)"
                        :class="{'active':item1.isActive}" :key="item.id">{{item1.name}}</span>
                </li>
                <li class="qubu"><span @click="sstj=!sstj">{{sstj?'展开全部':'收起'}}</span></li>
            </ul>
        </el-card>

        <!-- 
            排序
         -->
        <el-card class="Sorting" :body-style="{ padding: '20px' }">
            <div class="sortingall">
                <span @click="allSortHandler" class="sorting Synthesis">{{index1?'综合排序':'综合'}}</span>
                <span @click="countSortHandler" class="sorting Quantity">{{index2?'销量':'销量由高到低'}}</span>
                <span @click="viewSortHandler" class="sorting Browse">{{index3?'浏览量':'浏览量由高到低'}}</span>
                <span @click="clickVideoCoursePriceDesc" class="sorting Price">{{index4?'价格':'价格由高到低'}}</span>
                <span @click="timeSortHandler" class="sorting time">{{index5?'发布时间':'发布时间由近及远'}}</span>
            </div>
        </el-card>

        <!-- 
            视频区
          -->
        <el-card class="videoall" :body-style="{ padding: '0px' }">
            <div class="video-content">
                <div class="video-item" @click="tovideodetails(item)" v-for="item in videoList" :key="item.id">
                    <div class="video-item-top">
                        <img class="imgp" :src="item.cover[0]" alt="">
                        <img class="play_icon" src="https://rs.dance365.com/img/release_play@3x.fb313c4d.png" alt="">
                        <span class="subject_card">视频课</span>
                    </div>
                    <div class="moment_detail">
                        <div class="card_detail">
                            <span class="title">{{item.momentClassificationBackup.workTitle}}</span>
                            <div class="price">
                                <span>
                                    <span style="font-size: 14px;">￥</span>
                                    {{item.moreBackup.price}}
                                </span>
                                <span class="browsing">
                                    {{item.statisticsBackup.viewCount}}人浏览
                                </span>
                            </div>
                            <div class="huiiyuan">
                                <img src="https://rs.dance365.com/vip_free@3x.png" alt="">
                            </div>
                            <div class="details">
                                <span class="details-item"><img src="./images/点赞.svg" alt="">
                                    <span>{{item.statisticsBackup.praiseCount}}</span></span>
                                <span class="details-item"><img src="./images/评论.svg" alt="">
                                    <span>{{item.statisticsBackup.commentCount}}</span></span>
                                <span class="details-item"><img src="./images/收藏.svg" alt="">
                                    <span>{{item.statisticsBackup.favoriteCount}}</span></span>

                            </div>
                        </div>
                        <div class="creator_info">
                            <div class="info">
                                <img class="avatarClass" :src="item.creatorBackup.avatar" alt="">
                                <span class="creator_name">{{item.creatorBackup.name}}</span>
                                <img class="certified_icon" src="https://rs.dance365.com/authenticate_personal@3x.png"
                                    alt="">
                            </div>
                            <span class="uploadTime">{{time(item.createTime)}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>

        <div class="bot">
            <el-button class="bot-but" size="large" @click="loadMoreClick">加载更多</el-button>
        </div>
    </div>



</template>

<script lang="ts">
import { defineComponent } from "vue";
// import { ElMessage } from "element-plus";

export default defineComponent({
    name: "Members",
});
</script>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { requestSearchcriteria, getVideoList, videoCourseSellCountDesc, videoCourseCountDesc, videoCoursePriceAsc, videoCoursePriceDesc, videoSellTimeDesc } from '@/api/members'
import { onMounted, ref } from 'vue'

import { ElMessage } from "element-plus";
const router = useRouter();

// import type {Searchcriteria} from '@/api/model/membermodel'

//决定搜索条件是否隐藏
const sstj = ref(true)

//开关思想判断是否是相反
const index1 = ref(true)
const index2 = ref(true)
const index3 = ref(true)
const index4 = ref(true)
const index5 = ref(true)

//综合排序
const allSortHandler = () => {
    index1.value = false
    index2.value = true
    index3.value = true
    index4.value = true
    index5.value = true
    getVideo()
}

//销量排序
const countSortHandler = async () => {
    index1.value = true
    index3.value = true
    index4.value = true
    index5.value = true
    if (index2.value) {
        const res = await videoCourseSellCountDesc(pageSize.value, pageNum.value);
        videoList.value = res.content;
    }
    index2.value = false
}


//浏览量
const viewSortHandler = async () => {
    index1.value = true
    index2.value = true
    index4.value = true
    index5.value = true

    if (index3.value) {
        const res = await videoCourseCountDesc(pageSize.value, pageNum.value);
        videoList.value = res.content;
    }
    index3.value = false
}


//价格排序
const clickVideoCoursePriceDesc = async () => {
    index4.value = !index4.value
    index1.value = true
    index2.value = true
    index3.value = true
    index5.value = true
    if (index4.value) {
        const re = await videoCoursePriceAsc(pageSize.value, pageNum.value);
        videoList.value = re.content;
    } else {
        const re = await videoCoursePriceDesc(pageSize.value, pageNum.value);
        videoList.value = re.content;
    }
}

//发布时间
const timeSortHandler = async () => {
    index1.value = true
    index2.value = true
    index4.value = true
    index3.value = true

    if (index5.value) {
        const res = await videoSellTimeDesc(pageSize.value, pageNum.value);
        videoList.value = res.content;
    }
    index5.value = false

}


//封装一个修改时间的函数
function time(time3: number) {
    var date = new Date(time3);
    var Y = date.getFullYear() + '-';
    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
    return Y.slice(2) + M + D;
}



//页面的数据
const videoList = ref<any>([])
const pageSize = ref(20);
const pageNum = ref(0)

//定义搜索条件
const Searchcriteriatitle = ref<any>()

//封装获取用户搜索条件的回调函数
const getSearchcriteria = async () => {
    const re = await requestSearchcriteria()
    Searchcriteriatitle.value = re.map((item: any) => {
        // console.log('item',item)
        return {
            ...item,
            isthree: 0,
            choises: item.choises.map((item1: any) => {
                // console.log('item1',item1)
                return {
                    ...item1,
                    isActive: false
                }
            })
        }
    })
    // console.log('re', Searchcriteriatitle.value);

}

//点击搜索条件的函数
const clickactive = (item1: any, item: any) => {
    // console.log('a,b,c', item1, item)
    if (item1.isActive === true) {
        // console.log('是');
        
        item1.isActive = false
    } else {
        item1.isActive = true
    }
    //是否一个搜索条件已经被点击三次
    const Searchcriteriatitles = item
    let bny = Searchcriteriatitles.choises.filter((item: any) => {
        return item.isActive == true
    })
    // console.log('bny.length',bny.length);
    
    if (bny.length >= 4) {
        item1.isActive = false
        // console.log(3)
        // console.log('总的',item1,item,bny)
        // ElMessage.error("请求一级分类失败");
        ElMessage.error("同一搜索条件不可选择三条以上");
        return

    }

    // console.log('总的',item1,item,bny)
}

//封装获取视频详情的回调函数
const getVideo = async () => {
    const re = await getVideoList(pageSize.value, pageNum.value)
    videoList.value = re.content
    // console.log('视频', re)
}

// 点击加载更多
const loadMoreClick = async () => {
    pageNum.value += 1;
    const res = await getVideoList(pageSize.value, pageNum.value);
    videoList.value = videoList.value.concat(res.content);
}

//跳转到视频详情页
const tovideodetails = (item: any) => {
    // console.log('视频详情页', item);
    router.push('/videodetail?momentId=' + item.momentId + '&source=' + item.source)

}
onMounted(() => {
    getSearchcriteria()
    getVideo()
})
</script>


<style scoped lang="less">
.members_top {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    min-width: 1200px;

    .members-card {
        color: #111;
        // background-color: rgb(168, 69, 69);
        margin-top: 15px;
        margin-bottom: 10px;
        border-radius: 4px;

        .members-card-titel {
            font-size: 16px;
            margin: 0 0 16px;
            font-weight: 400;
        }

        .members-card-content {
            min-height: 50px;
            display: flex;
            align-items: center;
            justify-content: space-around;

            .members-card-content-img {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-image: url(https://rs.dance365.com/default_head@3x.png?imageView2/0/w/100/h/100/format/webp/ignore-error/1);
                background-size: cover;
                background-position: 50%;

            }

            .members-card-content-mid {
                display: flex;
                align-items: center;
                width: 90%;
                // background-color: aqua;
                justify-content: space-between;
                align-items: center;

                .right-item {
                    min-width: 220px;

                    .user {
                        color: #111;

                        .level_boxmedium {
                            margin-left: 8px;
                            display: inline-block;
                            box-sizing: border-box;
                            width: 41px;
                            height: 18px;
                            text-align: center;
                            color: #fff;
                            border-radius: 3px;
                            background-color: #ff2ba2;
                        }
                    }

                    .bootm {
                        margin-top: 8px;
                        font-size: 12px;
                        color: #f93684;
                    }

                }

                .right-item2 {
                    // height: 73px;
                    // line-height: 73px;
                    display: block;
                    -webkit-box-flex: 1;
                    -ms-flex: 1;
                    padding-left: 50px;
                    flex: 1;
                    text-align: center;
                    cursor: pointer;
                    display: flex;
                    justify-content: space-between;
                    border-left: 1px solid #8e8c8c;

                    .icon {
                        background-image: url(https://rs.dance365.com/teach_video_free.png);
                        width: 58px;
                        height: 58px;
                        display: inline-block;
                        background-size: 100%;
                        vertical-align: middle;
                        margin-right: 30px;

                    }

                    p {
                        display: inline-block;
                        vertical-align: middle;
                        width: 172px;
                        height: 36px;
                        margin-top: 14px;
                        margin-right: 80px;
                    }
                }

                .right-item3 {
                    display: block;
                    -webkit-box-flex: 1;
                    -ms-flex: 1;
                    padding-left: 50px;
                    flex: 1;
                    text-align: center;
                    cursor: pointer;
                    display: flex;
                    justify-content: space-between;

                    .icon {
                        background-image: url(https://rs.dance365.com/member_preferential.png);
                        width: 58px;
                        height: 58px;
                        display: inline-block;
                        background-size: 100%;
                        vertical-align: middle;
                        margin-right: 30px;

                    }

                    p {
                        display: inline-block;
                        vertical-align: middle;
                        width: 172px;
                        height: 36px;
                        margin-top: 14px;
                        margin-right: 90px;
                    }
                }
            }

            // .members-card-content-Open{
            //     .members-card-content-Open-button{
            //         color: ;
            //     }
            // }
        }
    }

    .Search-card {
        ul {
            li {
                margin-bottom: 10px;

                .spantitle {
                    display: inline-block;
                    width: 90px;
                    height: 22px;
                    line-height: 22px;
                    text-align: center;
                    background-color: #f93684;
                }

                .spantitleitem {
                    display: inline-block;
                    margin-right: 20px;
                    font-size: 14px;
                    color: #7d8090;
                    padding: 7px 13px;
                    margin: 0 24px 10px 0;
                    cursor: pointer;


                }

                .active {
                    border-radius: 5px;
                    background-color: #f93684;
                }
            }
        }

    }

    .Sorting {
        margin-top: 20px;

        .sortingall {
            .sorting {
                display: inline-block;
                margin-right: 50px;

            }
        }

    }

    .videoall {
        margin-top: 20px;

        .video-content {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;

            .video-item {
                width: 219px;
                display: flex;
                margin-bottom: 20px;
                flex-direction: column;
                background-color: rgb(242, 234, 234);
                border-radius: 4px;
                height: auto;

                .video-item-top {
                    position: relative;
                    overflow: hidden;

                    .imgp {
                        width: 224px;
                        height: 125px;
                    }

                    .play_icon {
                        position: absolute;
                        bottom: 6px;
                        left: 10px;
                        display: inline-block;
                        width: 30px;
                        height: 30px;
                    }

                    .subject_card {
                        position: absolute;
                        color: #fff;
                        right: 10px;
                        bottom: 10px;
                        font-size: 12px;
                        height: 24px;
                        line-height: 24px;
                        padding: 0 10px;
                        border-radius: 12px;
                        background: rgba(0, 0, 0, .6);
                    }


                }

                .moment_detail {
                    width: 100%;
                    color: #b1b5c1;
                    height: 155px;

                    .card_detail {
                        display: flex;
                        flex-direction: column;
                        padding-right: 10px;
                        padding-left: 10px;
                        padding-bottom: 13px;
                        border-bottom: 1px solid #ebeced;
                        height: 90px;

                        .title {
                            font-size: 15px;
                            color: #111;
                            padding-top: 10px;
                            line-height: 15px;
                            height: 40px;
                            width: 100%;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;

                        }

                        .price {
                            color: #f93684;

                            .browsing {
                                font-size: 10px;
                                line-height: 16px;
                                float: right;
                                color: rgb(235, 20, 20);
                            }
                        }

                        .huiiyuan {
                            height: 14px;

                            img {
                                vertical-align: middle;
                                height: 14px;
                            }
                        }

                        .details {
                            margin-top: 4px;

                            .details-item {
                                width: 20px;
                                margin-right: 16px;

                                img {
                                    width: 14px;
                                    height: 14px;
                                }
                            }
                        }
                    }

                    .creator_info {
                        display: flex;
                        justify-content: space-between;


                    }

                    .creator_info .info .avatarClass {
                        width: 24px;
                        height: 24px;
                        margin-left: 10px;
                        border-radius: 50%;
                        /*margin-top: 10px;*/
                    }

                    .creator_info .info .creator_name {
                        display: inline-block;
                        height: 20px;
                        color: #111;
                        cursor: pointer;
                        font-size: 12px;
                        margin-left: 8px;
                        margin-top: 13px;
                        max-width: 68px;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }

                    .creator_info .info .certified_icon {
                        margin-top: 8px;
                        width: 12px;
                        height: 12px;
                    }

                    .creator_info .uploadTime {
                        margin-top: 12px;
                        margin-right: 12px;
                    }
                }
            }
        }
    }

    .bot {
        margin: 20px 0;
        position: relative;

        .bot-but {
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }
    }

    .qubu {
        width: 100%;
        text-align: center;
        color: #f93684;
    }

    .active {
        background-color: #f93684;
    }
}
</style>